<template>
  <!-- 新版帖子发布页面 -->
  <view class="main">
    <view class="navigation">
      <view class="navigation_l" @tap="fanLastPage">
        <image src="../../imges/navigation.png" mode="aspectFill"></image>
      </view>
      <view class="navigation_c"> 发帖 </view>
      <view class="navigation_r" @tap="handleBaocan"> 发布 </view>
    </view>

    <view class="content">
      <textarea
        placeholder="点击输入内容..."
        v-model="content"
        maxlength="2000"
      />
    </view>

    <!-- 发照片 -->
    <view class="upload_img" v-if="imgs.length != 0">
      <view class="imgs" v-for="(item, index) in imgs" :key="index">
        <image
          :src="item"
          mode="aspectFill"
          class="image"
          @click="imgsDa(index)"
        ></image>
        <image
          src="../../imges/tieTuShan.png"
          mode="aspectFill"
          class="shan"
          @click="imgsShan(index)"
        ></image>
      </view>
    </view>

    <!-- 发视频 -->
    <view class="upload_video" v-if="videos">
      <!-- 视频 -->
      <view class="videoList">
        <!-- 删除按钮 -->
        <image
          src="../../imges/tieZiShan.png"
          mode="aspectFill"
          class="shan"
          @click="videoShan"
        ></image>
        <video
          object-fit="cover"
          :src="videos"
          title="圈子视频"
          controls
          :poster="firstUrl"
          :duration="duration"
        ></video>
      </view>
    </view>

    <!-- 添加商品后显示 -->
    <view class="addgoods" v-if="Object.keys(goodsDetail).length != 0">
      <view class="img">
        <image :src="goodsDetail.imgs" mode="aspectFill"></image>
        <view class="goods_top">
          <view class="bianji" @tap="handleBianJi"> 编辑 </view>
          <view class="guanbi" @tap="handleQuGoods">
            <image src="../../imges/goodsG.png" mode="aspectFill"></image>
          </view>
        </view>
        <view class="goods_bottom">
          <view class="top_one">
            {{ goodsDetail.name }}
          </view>
          <view class="center_one">
            {{ goodsDetail.abstract }}
          </view>
          <view class="bottom_one">
            <text class="yuan" v-if="goodsDetail.originalPrice"
              >¥{{ goodsDetail.originalPrice }}</text
            >
            <text class="xian">¥{{ goodsDetail.presentPrice }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 有活动状态 -->
    <view
      class="haveActivity"
      v-if="Object.keys(activityDetail).length > 0"
      @tap="handleTiao"
    >
      <view class="left">
        <image src="../../imges/active.png" mode="aspectFill"></image>
        <text>关联活动：</text>
        <text class="activeName">{{ activityDetail.topic }}</text>
      </view>
      <view class="right" @tap.stop="handleQiHuo">
        <image src="../../imges/tieZiShan.png" mode="aspectFill"></image>
      </view>
    </view>
    <!-- 底部改版 -->
    <view class="footer_">
      <view class="footer_one">
        <view class="left_">
          <navigator
            url="/pages/my_circle/addGoods"
            class="one_"
            hover-class="none"
          >
            <image src="../../imges/add_goods.png" mode="aspectFill"></image>
            <text>添加商品</text>
          </navigator>
          <navigator
            url="/pages/my_circle/joinYard"
            class="two_"
            hover-class="none"
          >
            <image src="../../imges/add_huodog.png" mode="aspectFill"></image>
            <text>添加活动</text>
          </navigator>
        </view>
        <view class="right_">
          <text>可被赞赏</text>
          <!-- 未选中 -->
          <image
            src="../../imges/huodong_w.png"
            mode="aspectFill"
            v-if="!isReward"
            @tap="handleChooseY"
          ></image>
          <!-- 选中 -->
          <image
            src="../../imges/fatei_x.png"
            mode="aspectFill"
            v-if="isReward"
            @tap="handleChooseN"
          ></image>
        </view>
      </view>
      <view class="footer_two">
        <view class="list">
          <!-- 添加话题 -->
          <view @tap.stop="handleYT">
            <picker
              @change="topicChange"
              :range="arrList"
              value=""
              :disabled="disabled"
            >
              <view class="two">
                <view class="left">
                  <image src="../../imges/huati.png" mode="aspectFill"></image>
                  发布到话题<text>(选填)</text>：
                </view>
                <view class="right">
                  <text>{{ topic }}</text>
                  <image src="../../imges/you.png" mode="aspectFill"></image>
                </view>
              </view>
            </picker>
          </view>
        </view>
      </view>
      <view class="footer_three">
        <view class="item_" @tap="selctPhone">
          <image src="../../imges/add_tu.png" mode="aspectFill"></image>
        </view>
        <view class="item_" @tap="pushVideo">
          <image
            src="../../imges/add_shi.png"
            mode="aspectFill"
            class="ing"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      imgs: [], //照片数组
      fileUrl: [], //图片数组
      videos: "", //视频数组
      topicList: [], //话题数组
      arrList: [],
      topicId: "", //话题id
      topic: "请选择",
      quan_id: "", //圈子id
      content: "",
      isReward: 1, //是否打赏
      upToken: "",
      qiniuyun: "",
      qiniuUrl: "",
      goodsDetail: {}, //商品详情
      disabled: false,
      activityDetail: {},
      duration: "", //时长
      firstUrl: "", //第一帧
      isPush: true,
    };
  },
  onShow() {
    if (uni.getStorageSync("goodsDetail")) {
      this.goodsDetail = uni.getStorageSync("goodsDetail");
    }
    if (uni.getStorageSync("activity")) {
      this.activityDetail = uni.getStorageSync("activity")[0];
    }
  },
  onLoad(options) {
    if (uni.getStorageSync("goodsDetail")) {
      this.goodsDetail = {};
      uni.removeStorageSync("goodsDetail");
    }
    if (uni.getStorageSync("activity")) {
      this.activity = {};
      uni.removeStorageSync("activity");
    }
    this.quan_id = options.id;
    this.handleTopicL();
    request({
      url: "webSite/home/uploadApplication",
      method: "post",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": "1.3.3",
        "Source-Type": 7,
      },
      data: {},
    }).then((res) => {
      this.upToken = res.data.data.upToken;
      this.qiniuyun = res.data.data.qiniuDomain;
      this.qiniuUrl = res.data.data.region;
    });
  },
  methods: {
    handleChooseY() {
      this.isReward = 1;
    },
    handleChooseN() {
      this.isReward = 0;
    },
    fanLastPage() {
      //返回上一页
      uni.navigateBack({
        delta: 1,
      });
    },
    handleTiao() {
      uni.navigateTo({
        url: "/pages/my_circle/joinYard",
      });
    },
    handleQiHuo() {
      let this_ = this;
      uni.showModal({
        title: "提示",
        content: "确认删除附加活动吗？",
        success: function (res) {
          if (res.confirm) {
            uni.removeStorageSync("activity");
            this_.activityDetail = "";
            uni.showToast({
              title: "删除成功",
              duration: 2000,
              icon: "none",
            });
          }
        },
      });
    },
    handleYT() {
      //提示
      if (this.topicList.length == 0) {
        uni.showToast({
          title: "该圈子未设置话题",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
    },
    handleBianJi() {
      //商品编辑
      uni.navigateTo({
        url: "/pages/my_circle/addGoods?style=1",
      });
    },
    handleQuGoods() {
      //删除商品
      let this_ = this;
      uni.showModal({
        title: "提示",
        content: "确认删除附加商品吗？",
        success: function (res) {
          if (res.confirm) {
            uni.removeStorageSync("goodsDetail");
            this_.goodsDetail = "";
            uni.showToast({
              title: "删除成功",
              duration: 2000,
              icon: "none",
            });
          }
        },
      });
    },
    handleBaocan() {
      if (this.isPush == false) {
        return false;
      }
      if (!this.content && this.fileUrl.length == 0 && !this.videos) {
        uni.showToast({
          title: "请填写发布内容",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      //点击发布
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgMessage/savePost?uid=",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            uid: "",
            orgId: this.quan_id,
            messageType: 13,
            friendsTopic: this.topicId,
            content: this.content,
            isOnlyOrg: 0,
            sourceType: 6,
            isReward: this.isReward,
            imgCollection: this.fileUrl,
            goodsInfo: {
              //商品参数
              id: "",
              goodsName: this.goodsDetail.name,
              goodsBrief: this.goodsDetail.abstract,
              goodsImg: this.goodsDetail.imgs,
              price: this.goodsDetail.originalPrice,
              presentPrice: this.goodsDetail.presentPrice,
              // storeLinks: this.goodsDetail.details,
              delFlag: 0,
            }, //商品相关
            activityId: this.activityDetail.id, //活动id
          },
        }).then((res) => {
          // console.log(res, '发布帖子')
          if (res.data.code == 200) {
            uni.showToast({
              title: "发布成功",
              duration: 1500,
              icon: "none",
            });
            this.isPush = false;
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleTopicL() {
      //获取话题列表
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/friendsTopic/topicList",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.quan_id,
          },
        }).then((res) => {
          // console.log(res, '话题圈子')
          if (res.data.code == 200) {
            this.topicList = res.data.data;
            let arrList = [];
            res.data.data.forEach((v) => {
              arrList.push(v.topic);
            });
            this.arrList = arrList;
            if (this.arrList.length == 0) {
              this.disabled = true;
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    selctPhone(e) {
      //点击上传图片
      if (this.imgs.length >= 9) {
        uni.showToast({
          title: "最多上传9张图片",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      uni.chooseImage({
        count: 9,
        success: (res) => {
          let tempFilePaths = res.tempFilePaths;
          this.imgs = [...this.imgs, ...tempFilePaths];
          if (this.imgs.length >= 9) {
            this.imgs.length = 9;
          }
          tempFilePaths.forEach((v, i) => {
            uni.uploadFile({
              url: "https://up-z0.qiniup.com",
              filePath: tempFilePaths[i],
              name: "file",
              formData: {
                token: this.upToken,
              },
              success: (uploadFileRes) => {
                let vdaList = this.fileUrl.filter((v) => {
                  return v.fileType == 3;
                });
                let mList = this.fileUrl.filter((v) => {
                  return v.fileType == 1;
                });
                let imList = [];
                imList.push({
                  fileUrl:
                    this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key,
                });
                imList.map((v) => {
                  v.fileType = 1;
                  return v;
                });
                var imgListimg = [...mList, ...imList]; //最多9张图片
                if (imgListimg.length >= 9) {
                  uni.showToast({
                    title: "最多上传9张图片",
                    duration: 1000,
                    icon: "none",
                  });
                  imgListimg.length = 9;
                }
                this.fileUrl = [...imgListimg, ...vdaList];
                uni.showToast({
                  title: "上传成功",
                  duration: 1500,
                  icon: "none",
                });
              },
            });
          });
        },
      });
    },

    imgsDa(index) {
      //点击放大
      uni.previewImage({
        urls: this.imgs,
        current: index,
        loop: true,
      });
    },
    imgsShan(index) {
      //点击删除
      uni.showModal({
        title: "提示",
        content: "确定删除此张照片吗？",
        success: (res) => {
          if (res.confirm) {
            this.imgs.splice(index, 1);
            let imgList = this.fileUrl.filter((v) => {
              return v.fileType == 1;
            });
            let vodList = this.fileUrl.filter((v) => {
              return v.fileType == 3;
            });
            this.fileUrl = [...imgList, ...vodList];
            this.fileUrl.splice(index, 1);
          }
        },
      });
    },
    pushVideo() {
      if (this.videos) {
        uni.showToast({
          title: "最多上传1个视频",
          duration: 1000,
          icon: "none",
        });
        return false;
      }
      //上传视频事件
      uni.chooseVideo({
        count: 1,
        sourceType: ["camera", "album"],
        success: (res) => {
          this.videos = res.tempFilePath;
          this.duration = res.duration; //视频时长
          // console.log(this.duration);
          if (res.duration == 0) {
            this.duration = "";
          }
          uni.uploadFile({
            url: "https://up-z0.qiniup.com",
            filePath: res.tempFilePath,
            name: "file",
            formData: {
              token: this.upToken,
            },
            success: (uploadFileRes) => {
              let arr = [];
              arr.push({
                fileUrl:
                  this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key,
                firstUrl:
                  this.qiniuyun +
                  "/" +
                  JSON.parse(uploadFileRes.data).key +
                  "?vframe/jpg/offset/1",
                fileType: 3,
                videoTime: this.duration,
              });
              this.firstUrl =
                this.qiniuyun +
                "/" +
                JSON.parse(uploadFileRes.data).key +
                "?vframe/jpg/offset/1";
              this.fileUrl = [...this.fileUrl, ...arr];
              uni.showToast({
                title: "上传成功",
                duration: 1500,
                icon: "none",
              });
            },
          });
        },
      });
    },
    videoShan() {
      uni.showModal({
        title: "提示",
        content: "确定删除当前视频吗？",
        success: (res) => {
          if (res.confirm) {
            this.videos = "";
            this.fileUrl = this.fileUrl.filter((v) => {
              return v.fileType == 1;
            });
          }
        },
      });
    },
    topicChange(e) {
      //选择话题接口
      let index = e.detail.value;
      this.topic = this.topicList[index].topic;
      this.topicId = this.topicList[index].id;
    },
  },
};
</script>


<style lang="less" scoped>
.main {
  padding-bottom: 300rpx;
  .addgoods {
    padding: 32rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    .img {
      position: relative;
      width: 686rpx;
      height: 380rpx;
      overflow: hidden;
      border-radius: 12rpx;
      > image {
        width: 100%;
        height: 100%;
      }
      .goods_top {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        display: flex;
        .bianji {
          width: 96rpx;
          height: 50rpx;
          background: rgba(0, 0, 0, 0.45);
          border-radius: 25rpx;
          text-align: center;
          line-height: 50rpx;
          font-size: 24rpx;
          // font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
        .guanbi {
          margin-top: -1rpx;
          margin-left: 20rpx;
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          // background-color: rgba(0, 0, 0, 0.58);
          text-align: center;
          overflow: hidden;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .goods_bottom {
        width: 686rpx;
        height: 256rpx;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
        box-shadow: 0px 2rpx 20rpx 0rpx rgba(255, 255, 255, 0.1);
        border-radius: 10rpx;
        opacity: 0.75;
        position: absolute;
        bottom: 0;
        left: 0;
        padding-left: 24rpx;
        padding-top: 84rpx;
        box-sizing: border-box;
        .top_one {
          margin-top: 3rpx;
          font-size: 34rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
        .center_one {
          margin-top: 8rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #fb8724;
        }
        .bottom_one {
          margin-top: 16rpx;
          display: flex;
          .yuan {
            margin-top: 3rpx;
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #cccccc;
            padding-right: 20rpx;
            text-decoration: line-through;
          }
          .xian {
            display: inline-block;
            font-size: 34rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffd510;
          }
        }
      }
    }
  }
  .list .two {
    padding: 29rpx 32rpx;
    border-top: 2rpx solid #eee;
    display: flex;
    justify-content: space-between;
    .left {
      font-size: 34rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      display: flex;
      align-items: center;
      text {
        font-size: 20rpx;
      }
      image {
        width: 40rpx;
        height: 33rpx;
        margin-right: 6rpx;
      }
    }
    .right {
      display: flex;
      align-items: center;
      image {
        width: 12rpx;
        height: 28rpx;
        margin-left: 12rpx;
      }
      text {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
  .upload_img,
  .upload_video,
  .addActivity,
  .addGoods {
    width: 100%;
    box-sizing: border-box;
    padding: 10rpx 32rpx;
    display: flex;
    flex-wrap: wrap;
  }
  .upload_img {
    .img {
      border: 2rpx solid #eee;
      box-sizing: border-box;
      width: 200rpx;
      height: 200rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgba(249, 249, 250, 1);
      border-radius: 8rpx;
      image {
        height: 69rpx;
        width: 75rpx;
      }
      text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 18rpx;
      }
    }
    .imgs {
      width: 200rpx;
      height: 200rpx;
      margin-right: 15rpx;
      margin-bottom: 15rpx;
      border-radius: 12rpx;
      overflow: hidden;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
      .shan {
        position: absolute;
        top: 0rpx;
        right: 0rpx;
        height: 34rpx;
        width: 34rpx;
      }
    }
  }
  .upload_video {
    display: flex;
    flex-wrap: wrap;

    .videoList {
      // margin-right: 15rpx;
      margin: 0 auto;
      margin-bottom: 15rpx;
      width: 100%;
      height: 400rpx;
      position: relative;
      video {
        width: 100%;
        height: 100%;
      }
      .shan {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        height: 46rpx;
        width: 46rpx;
        z-index: 99;
      }
    }

    .video {
      border: 2rpx solid #eee;
      box-sizing: border-box;
      width: 200rpx;
      height: 200rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgba(249, 249, 250, 1);
      border-radius: 8rpx;
      image {
        width: 75rpx;
        height: 62rpx;
      }
      text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 18rpx;
      }
    }
  }
  .addActivity {
    .activity {
      border: 2rpx solid #eee;
      box-sizing: border-box;
      width: 200rpx;
      height: 200rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgba(249, 249, 250, 1);
      border-radius: 8rpx;
      image {
        height: 63rpx;
        width: 63rpx;
      }
      text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 18rpx;
      }
    }
  }
  .addGoods {
    .goods {
      border: 2rpx solid #eee;
      box-sizing: border-box;
      width: 200rpx;
      height: 200rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgba(249, 249, 250, 1);
      border-radius: 8rpx;
      image {
        margin-bottom: -10rpx;
        height: 80rpx;
        width: 80rpx;
      }
      text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 18rpx;
      }
    }
  }
  .haveActivity {
    width: 686rpx;
    height: 100rpx;
    background: rgba(238, 245, 254, 0.9);
    border-radius: 8rx;
    padding: 0 40rpx 0 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10rpx auto;
    .left {
      height: 100rpx;
      display: flex;
      align-items: center;
      image {
        height: 34rpx;
        width: 34rpx;
        margin-right: 14rpx;
      }
      text {
        font-size: 30rpx;
        color: #888888;
      }
      .activeName {
        color: #333333;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
    }
    .right {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      image {
        width: 46rpx;
        height: 46rpx;
      }
    }
  }
  .footer_ {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 750rpx;
    background-color: #fff;
    z-index: 666;
    .footer_three {
      display: flex;
      height: 100rpx;
      align-items: center;
      width: 750rpx;
      border-top: 2rpx solid #eee;
      .item_ {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 42rpx;
          height: 34rpx;
        }
        .ing {
          width: 48rpx;
          height: 34rpx;
        }
      }
    }
    .footer_one {
      display: flex;
      justify-content: space-between;
      width: 750rpx;
      padding: 0 32rpx;
      box-sizing: border-box;
      align-items: center;
      height: 100rpx;
    }
    .left_ {
      display: flex;
      align-items: center;
      .one_,
      .two_ {
        display: flex;
        align-items: center;
        image {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
        }
        text {
          margin-left: 14rpx;
          display: inline-block;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
      .two_ {
        margin-left: 44rpx;
      }
    }
    .right_ {
      display: flex;
      align-items: center;
      text {
        font-size: 26rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      image {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-left: 18rpx;
      }
    }
  }
  .navigation {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9999;
    height: 100rpx;
    width: 750rpx;
    box-sizing: border-box;
    padding: 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #d8d8d8;
    .navigation_l {
      width: 20rpx;
      height: 35rpx;
      display: flex;
      align-items: center;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .navigation_c {
      font-size: 34rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .navigation_r {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2168eb;
    }
  }
  .content {
    // margin-top: 100rpx;
    width: 750rpx;
    height: 300rpx;
    padding: 32rpx;
    padding-top: 132rpx;
    box-sizing: border-box;
    textarea {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
